// 游戏主页
<template>
  <van-row class="mobile-list">
    <van-row class="info-top" v-show="showInfo">
      <van-col span="8">
        <van-row>额度</van-row>
        <van-row>{{memberInfo.hk_remaining_amount}}+{{memberInfo.qk_remaining_amount}}</van-row>
      </van-col>
      <van-col class="middle" span="8">
        <van-row>未结金额</van-row>
        <van-row style="color:red;">100</van-row>
      </van-col>
      <van-col span="8">
        <van-row>今日输赢</van-row>
        <van-row style="color:red;">100</van-row>
      </van-col>
    </van-row>
    <van-row class="info-btn">
      <van-button size="mini" @click="showInfo = !showInfo">^</van-button>
    </van-row>

    <van-row class="jiang">
      <van-row>
        <van-col span="7">
          3535345期
        </van-col>
        <van-col span="17">
          1234567768
        </van-col>
      </van-row>
      <van-row>
        <van-col span="7">
          3535345期
        </van-col>
        <van-col class="small" span="6">
          封盘:
          <span style="color:red;">00:00</span>
        </van-col>
        <van-col class="small" span="6">
          开奖:
          <span style="color:green;">00:00</span>
        </van-col>
        <van-col span="5">
          刷新 6
        </van-col>
      </van-row>
    </van-row>

    <van-row class="game-content">
      <van-col class="side-left" :class="showInfo ? 'content-short' : 'content-long'" span="8" v-if="memberPageSelected">
        <div class="page-tab" :class="memberPageSelected == index && 'page-tab-active'" v-for="(item,index) in memberPages" :key="`memberpages${index}`" @click="onClickPage(index)">{{item}}</div>
        <div class="bet-contain">
          <span @click="goBet">
            <div>{{betsCount}}注</div>
            <div>下注</div>
          </span>
          <div class="bet-reset" @click="reset">重置</div>
        </div>
      </van-col>

      <van-col class="side-right" :class="showInfo ? 'content-short' : 'content-long'" span="16" v-if="memberLottery && memberOdds">

        <van-collapse v-model="activePanName">
          <van-collapse-item v-for="(item,index) in memberLottery" :key="`memberLottery${index}`" :title="index" :name="index">
            <van-row>
              <van-col v-for="(row,i) in item" :key="`memberLottery${i}`" class="game-cell-container" span="12">
                <div @click="cellClick(row,index)" class="game-cell" :class="{active:bets && bets[row.option_code]}">
                  <van-row> {{row.option_name}} </van-row>
                  <van-row> {{memberOdds[row.option_code]}} </van-row>
                  <van-icon name="success" v-show="bets && bets[row.option_code]" />
                </div>
              </van-col>
            </van-row>
          </van-collapse-item>
        </van-collapse>

      </van-col>
    </van-row>
  </van-row>
</template>
<script>
  import { mapGetters } from 'vuex'
  // import { user as userMap } from '@/utils/map' // 参数映射
  import { Row, Col, Button, Collapse, CollapseItem, Icon, Toast } from 'vant'

  export default {
    name: 'mobileList',
    components: {
      [Row.name]: Row,
      [Col.name]: Col,
      [Button.name]: Button,
      [Collapse.name]: Collapse,
      [CollapseItem.name]: CollapseItem,
      [Icon.name]: Icon,
    },
    data() {
      return {
        loading: false,
        showInfo: true,
        bets: {},
      }
    },

    computed: {
      ...mapGetters([
        'memberInfo',
        'memberGames',
        'memberPages',
        'memberLottery',
        'memberBets',
        'memberOdds',
        'memberGameSelected',
        'memberPageSelected',
        'memberListActivePanel',
      ]),
      betsCount() {
        return Object.keys(this.memberBets).length
      },
      activePanName: {
        get() {
          return this.memberListActivePanel
        },
        set(value) {
          this.$store.commit('MEMBER_SET_PANEL', value)
        },
      },
    },

    // 数据格式化
    filters: {},

    created() {
      this.bets = JSON.parse(JSON.stringify(this.memberBets))
    },

    methods: {
      onClickPage(page) {
        this.$store.commit('MEMBER_SELECT_PAGE', page)
      },
      getBet() {},
      cellClick(row, lottery_name) {
        const item = {
          amount: '',
          option: row.option_code,
          lottery_name,
          content: row.option_name,
          odd: this.memberOdds[row.option_code],
          game_code: this.memberGameSelected,
          game_name: this.memberGames[this.memberGameSelected],
          page_code: this.memberPageSelected,
          page_name: this.memberPages[this.memberPageSelected],
        }

        if (this.bets[row.option_code]) {
          this.$set(this.bets, row.option_code, false) // 为了可以使页面重新渲染
          delete this.bets[row.option_code] // 同时删除
        } else {
          // 注意: 由于js的限制,Vue不能检测动态数组的变化,所以用$set 或者 splice实现数组的绑定
          this.$set(this.bets, row.option_code, item)
          // this.bets[row.option_code] = item
        }

        //保存到store 深复制
        this.$store.commit(
          'MEMBER_SET_BETS',
          JSON.parse(JSON.stringify(this.bets)),
        )
      },

      goBet() {
        if (this.betsCount > 0) {
          this.$router.push('/mobile/bet')
        } else {
          Toast({ message: '未选泽投注项目', duration: 1500 })
        }
      },

      reset() {
        this.bets = {}
        this.$store.commit('MEMBER_SET_BETS', {})
      },
    },

    watch: {
      async memberPageSelected(to, from) {
        await this.$store.dispatch('MemberOrdersLottery', {
          game: this.memberGameSelected,
          page: this.memberPageSelected,
        })
        // 获取新比率
        await this.$store.dispatch('MemberOrdersOdds', {
          game: this.memberGameSelected,
          page: this.memberPageSelected,
          _: Date.now(),
        })
      },
    },
  }
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  @import 'src/styles/variables.scss';
  .bg-left {
    color: #fff;
    background: -webkit-linear-gradient(
      150deg,
      $bga,
      $bgRight
    ); /* Safari 5.1 - 6.0 */
    background: -o-linear-gradient(
      150deg,
      $bga,
      $bgRight
    ); /* Opera 11.1 - 12.0 */
    background: -moz-linear-gradient(
      150deg,
      $bga,
      $bgRight
    ); /* Firefox 3.6 - 15 */
    background: linear-gradient(
      150deg,
      $bga,
      $bgRight
    ); /* 标准的语法（必须放在最后） */
  }

  $cu: rgb(43, 153, 231);
  $cd: rgb(173, 211, 238);
  .cell-active {
    color: #fff;
    background: -webkit-linear-gradient(150deg, $cu, $cd); /* Safari 5.1 - 6.0 */
    background: -o-linear-gradient(150deg, $cu, $cd); /* Opera 11.1 - 12.0 */
    background: -moz-linear-gradient(150deg, $cu, $cd); /* Firefox 3.6 - 15 */
    background: linear-gradient(
      150deg,
      $cu,
      $cd
    ); /* 标准的语法（必须放在最后） */
  }

  .mobile-list {
    text-align: center;
    height: 100%;
    .info-top {
      background-color: #fff;
      padding: 5px 0;
      font-size: 14px;
      .middle {
        border-left: $bgc 1px solid;
        border-right: $bgc 1px solid;
      }
      .van-col {
        .van-row:first-of-type {
          color: gray;
        }
      }
    }
    .info-btn {
      height: 18px;
      margin-top: -8px;
      .van-button {
        height: 15px;
        line-height: 19px;
        border-radius: 0 0 90% 90%;
        border: none;
      }
    }
    .jiang {
      .van-row {
        background-color: #fff;
        font-size: 14px;
        margin: 4px 0;
        height: 40px;
        line-height: 40px;
        .small {
          font-size: 12px;
        }
      }
    }
    .game-content {
      // background-color: #fff;
      .content-long {
        height: calc(100vh - 96px - 103px); //计算
        min-height: 300px; //计算
      }
      .content-short {
        height: calc(100vh - 96px - 103px - 42px); //计算
        min-height: 300px; //计算
      }
      .side-left {
        @extend .bg-left;
        position: relative; // 为子元素的position absolute做准备
        .page-tab {
          width: 100%;
          font-size: 14px;
          font-weight: 500;
          padding: 14px 0;
          border-bottom: 1px solid $bgc;
        }
        .page-tab-active {
          font-weight: 700;
          color: $linkActive;
          background-color: #fff;
        }
        .bet-contain {
          position: absolute; //相对side-left的定位
          bottom: 10%;
          left: 15%;
          width: 70%;
          font-weight: 480;
          background-color: #fff;
          color: $linkActive;
          border-radius: 0.5em;
          div {
            padding: 5px 15px;
          }
          .bet-reset {
            border-top: 1px solid $linkActive;
          }
        }
      }
      .side-right {
        overflow: scroll;
        .game-cell-container {
          padding: 5px;
          .game-cell {
            border: 1px solid $bgc;
            border-radius: 0.5em;
            font-size: 16px;
            position: relative;
            .van-row {
              padding: 2px 0;
            }
            .van-row:first-of-type {
            }
            .van-row:last-of-type {
              color: red;
            }
            .van-icon {
              color: green;
              position: absolute;
              top: -4px;
              right: -3px;
            }
          }
          .active {
            @extend .cell-active;
            font-weight: 800;
          }
        }
      }
    }
  }
</style>

